<template>
    <div class="oeeCount">
        <!-- 头部 -->
        <topContainer @getId='getId' :name='topName' @fullscreen='fullscreen' @setBoard="setBoard"></topContainer>

        <div class="boardContainer">
            <div class="cardList scrollNone">
                <div class="card" :style="{width:setWidth}" v-for="i in deviceCountVos" :key="i.deviceId"
                    @click="showPop(i.deviceId)">
                    <div class="card-item" :style="{fontSize:setFont}">
                        <div class="cardTitle" :class="enumState[i.statusName]">
                            <span class="ellipsis">{{i.deviceSn}}</span>
                            <span class="ellipsis">{{i.deviceName}}</span>
                        </div>
                        <div class="card-body" :class="enumState[i.statusName] + '_MASK'">
                            <div class="piebox">
                                <span>{{i.totalNum}}</span>
                                <span>{{i.numOfHour}}/h</span>
                            </div>
                        </div>
                        <div class="card-bottom">
                            <span :class="enumState[i.statusName]" class="ellipsis">
                                {{utils.formatTime(i.startTime,"MM-dd hh:mm:ss")}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <pulses-frame ref="pulses" @handlePulses="handlePulses"></pulses-frame>

        <setBoard ref="setBoard" @confirm="confirm"></setBoard>
    </div>
</template>

<script>
    import {
        countDashboard,
        cacheCountCondition
    } from '@/api/deviceController'
    import {
        getSearchCache
    } from '@/api/produceController'
    import pulsesFrame from './pulsesFrame'
    import setBoard from './setBoard.vue'
    export default {
        data() {
            return {
                enumState: {
                    '关机': 'off',
                    '故障': 'hitch',
                    '离线': 'off',
                    '等待': 'wait',
                    '运行': 'move'
                },
                deviceCountVos: [],
                topName: '计数看板',
                groupId: '',
                deviceId: '',
                cacheInfo: {}
            }
        },
        components: {
            pulsesFrame,
            setBoard
        },
        computed: {
            setWidth() {
                return (100 / this.cacheInfo.number) + '%'
            },
            setFont() {
                return (90 / this.cacheInfo.number) + 'px'
            }
        },
        methods: {
            //分组id
            getId(groupId) {
                this.groupId = groupId
                this.getSearchCacheFn({
                    cacheName: 'oeeCount:set',
                    type: 0
                }).then(() => {
                    this.handleInterface()
                })
            },
            //看板列表
            getCountDashboard: async function (data) {
                const res = await countDashboard(data)
                if (res.code == 200) {
                    const {
                        interval
                    } = this.cacheInfo
                    this.deviceCountVos = res.data
                    clearInterval(window.countTimer)
                    window.countTimer = setInterval(() => {
                        this.handleInterface()
                    }, interval * 1000)
                }
            },
            //计数看板设备条件缓存
            cacheCountConditionFn: async function(data){
                await cacheCountCondition(data)
            },
            //获取缓存信息
            getSearchCacheFn: async function (data) {
                const res = await getSearchCache(data)
                this.cacheInfo = res.data !== null ? JSON.parse(res.data) : {
                    number: 9,
                    interval: 10,
                    uphincludeCloseTime: false
                }
            },
            showPop(deviceId) {
                this.deviceId = deviceId
                const target = this.deviceCountVos.find(i => i.deviceId === deviceId)
                this.$refs.pulses.open(target.numberPulses)
            },
            fullscreen(isFull) {
                let elem = document.querySelector(".oeeCount");
                isFull ? elem.requestFullscreen() : document.exitFullscreen()
            },
            setBoard() {
                let jsonData = JSON.parse(JSON.stringify(this.cacheInfo))
                this.$refs.setBoard.open(jsonData)
            },
            handlePulses(numberPulses,type) {
                this.cacheCountConditionFn({
                    deviceId: this.deviceId,
                    numberPulses,
                    startTime: type ? new Date().dateFormat("yyyy-MM-dd hh:mm:ss") : undefined
                }).then(()=>{
                    this.handleInterface()
                })
            },
            confirm(form) {
                this.cacheInfo = form
                this.handleInterface()
            },
            handleInterface() {
                this.getCountDashboard({
                    groupId: this.groupId,
                    uphincludeCloseTime:this.cacheInfo.uphincludeCloseTime
                })
            }
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(window.countTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .oeeCount {
        padding: 20px;
        background-color: #000;
        overflow-y: auto;
        height: 100%;

        .off {
            color: @text-color-off;
        }

        .hitch {
            color: @text-color-hitch;
        }

        .wait {
            color: @text-color-wait;
        }

        .move {
            color: @text-color-move;
        }

        .off_MASK {
            background-color: @text-color-off;
        }

        .hitch_MASK {
            background-color: @text-color-hitch;
        }

        .wait_MASK {
            background-color: @text-color-wait;
        }

        .move_MASK {
            background-color: @text-color-move;
        }

        .boardContainer {
            position: relative;
            border: 1px solid rgba(58, 200, 243, .8);
            height: calc(100% - 76px);
            padding: 5px 0 0 20px;

            .cardList {
                display: flex;
                flex-wrap: wrap;
                height: calc(100% - 19px);
                overflow-y: auto;
                align-content: flex-start;

                .card {
                    padding-right: 15px;

                    .card-item {
                        margin-top: 15px;
                        background-color: #e3fdf7;
                        border-radius: 8px;
                        cursor: pointer;

                        .cardTitle {
                            display: flex;
                            flex-direction: column;
                            font-size: 1.4em;
                            height: 3em;
                            color: #999;
                            padding: 0 0.5em 0 0.5em;
                            text-align: left;

                        }

                        .card-body {
                            height: 12em;
                            color: #fff;

                            .piebox {
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                text-align: center;
                            }

                            span {
                                display: inline-block;
                                width: 100%;
                                font-size: 1.6em;
                                font-weight: 650;
                            }
                        }

                        .card-bottom {
                            height: 2.5em;
                            line-height: 2.5em;
                            font-size: 1.4em;
                            padding: 0 0.5em 0 0.5em;
                            text-align: center;
                        }
                    }
                }

                .ellipsis {
                    width: 100%;
                    display: inline-block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }
</style>